<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('邮件系统')"/>
    <th:block th:include="include :: list-css"/>
    <link rel="stylesheet" th:href="@{/js/layuiadmin-1.2.1/lib/extend/wangEditor/wangEditor.min.css}" media="all"/>
    <style type="text/css">
        html {
            background: #FFF
        }

        .layui-btn .dh-search:before {
            color: #1E9FFF
        }

        .layui-btn .dh-mail-reply:before {
            color: darkturquoise
        }

        .dh-folder-open-o:before, .dh-folder:before {
            color: #CCA077
        }

        #view-content {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 130px;
        }

        #expander {
            width: 100%;
            height: 6px;
            background-color: #999;
        }

        #expander:hover {
            cursor: row-resize;
        }

        #m-content {
            overflow-y: auto;
            padding: 0;
        }

        .close {
            cursor: pointer;
            position: absolute;
            right: 6px;
            top: 45px;
        }

        .getMore {
            top: 0 !important;
        }

        .dh-mailread, .dh-envelope {
            font-size: 18px;
        }

        .layui-table-tool .layui-btn-container {
            margin-bottom: -2px;
        }
    </style>
</head>
<body>
<div class="main-content">
    <table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
</div>

<div id="view-content" style="display:none;">
    <div class="close" onclick="closeView();">关闭</div>
    <div id="expander"></div>
    <div id="m-content" class="w-e-text">It's Your Contents !</div>
</div>
<input type="hidden" id="nid" value="">
<script th:src="@{/js/jquery/jquery.min.js}"></script>
<script th:src="@{/js/jquery/jquery.cookie.js}"></script>
<script th:src="@{/js/layuiadmin-1.2.1/layui/layui.js?v=2}"></script>
<script th:src="@{/js/jquery/jquery.blockUI.min.js}"></script>
<script th:src="@{/dhecp/js/dh-common.js?v=53}"></script>
<script th:src="@{/dhecp/js/dh-ui.js?v=36}"></script>
<script th:src="@{/dhecp/js/dh-motif-list.js?v=35}"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    var gridColumns = [[${gridColumns}]],
        moduleTable = [[${moduleTable}]],
        pageType = [[${pageType}]],
        ctx = [[@{/}]],
            prefix = [[${prefix}]];
    /*]]>*/
</script>
<!-- 表格头部工作栏-->
<script type="text/html" id="toolbar">
    	<div class="layui-btn-container" style="height: 46px;line-height:46px;">
    		{{#  if(pageType == 'inbox'){ }}
    		<div class="layui-btn layui-btn-danger layui-table-tools" onclick="toolbarFun('deleted')" style="background: #C80000 !important;"><p class="dhicon dh-remove" style="color:white;font-size:14px"><span class="fa_span">批量删除</span></p></div>
    		<div class="layui-btn layui-table-tools importbtn-bg" onclick="toolbarFun('readed')" style="background: #F3A041 !important;"><i class="dhicon dh-folder-open-o"></i> 标记已读</div>
    		{{#  }else if(pageType == 'outbox'){ }}
    		<div class="layui-btn layui-btn-danger layui-table-tools" onclick="toolbarFun('deleted')" style="background: #C80000 !important;"><p class="dhicon dh-remove" style="color:white;font-size:14px"><span class="fa_span">批量删除</span></p></div>
    		<div class="layui-btn layui-table-tools" onclick="toolbarFun('cancel')" style="background: #00A115 !important;"><p class="dhicon dh-minus-circle" style="color:white;font-size:14px"><span class="fa_span">批量撤销</span></p></div>
    		{{#  }else if(pageType == 'draftbox' || pageType == 'canceled'){ }}
    		<div class="layui-btn layui-btn-danger layui-table-tools" onclick="toolbarFun('deleted')" style="background: #C80000 !important;"><p class="dhicon dh-remove" style="color:white;font-size:14px"><span class="fa_span">批量删除</span></p></div>
    		{{#  }else if(pageType == 'deleted'){ }}
    		<div class="layui-btn layui-btn-danger layui-table-tools" onclick="toolbarFun('deletedsup')" style="background: #C80000 !important;"><p class="dhicon dh-remove" style="color:white;font-size:14px"><span class="fa_span">彻底删除</span></p></div>
    		<div class="layui-btn layui-table-tools importbtn-bg" onclick="toolbarFun('recover')" style="background: #00A115 !important;"><p class="dhicon dh-refresh" style="color:white;font-size:14px"><span class="fa_span">批量恢复</span></p></div>
    		{{#  } }}
    	</div>

<!--    <div class="layui-btn-container mail-ul">-->
<!--        {{# if(pageType == 'inbox'){ }}-->
<!--        <div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件-->
<!--        </div>-->
<!--        <div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>-->
<!--        {{# }else if(pageType == 'draftbox'){ }}-->
<!--        <div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件-->
<!--        </div>-->
<!--        <div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>-->
<!--        {{# }else if(pageType == 'outbox'){ }}-->
<!--        <div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件-->
<!--        </div>-->
<!--        <div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>-->
<!--        {{# }else if(pageType == 'savebox'){ }}-->
<!--        <div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件-->
<!--        </div>-->
<!--        <div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>-->
<!--        {{# }else if(pageType == 'massbox'){ }}-->
<!--        <div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件-->
<!--        </div>-->
<!--        <div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>-->
<!--        {{# }else if(pageType == 'deletedbox'){ }}-->
<!--        <div class="layui-btn layui-btn-normal layui-table-tools" lay-event="add"><i class="dhicon dh-edit"></i>&nbsp;新建邮件-->
<!--        </div>-->
<!--        <div class="layui-btn layui-table-tools" lay-event="refresh"><i class="dhicon dh-refresh"></i>&nbsp;刷新</div>-->
<!--        {{# } }}-->
<!--    </div>-->
</script>
<!--<script type="text/html" id="barDh">
	{{#  if(pageType == 'inbox'){ }}
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="readonly"><i class="dhicon dh-search"></i>&nbsp;查看</a>
	<a class="layui-btn layui-btn-xs" lay-event="reply"><i class="dhicon dh-mail-reply"></i>&nbsp;回复</a>
	<a class="layui-btn layui-btn-xs" lay-event="transport"><i class="dhicon dh-external-link"></i>&nbsp;转发</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
	{{#  }else if(pageType == 'outbox'){ }}
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="readonly"><i class="dhicon dh-search"></i>&nbsp;查看</a>
	<a class="layui-btn layui-btn-xs" lay-event="cancel"><i class="dhicon dh-minus-circle"></i>&nbsp;撤销</a>
	<a class="layui-btn layui-btn-xs" lay-event="transport"><i class="dhicon dh-external-link"></i>&nbsp;转发</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
	{{#  }else if(pageType == 'draftbox' || pageType == 'canceled'){ }}
	<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="dhicon dh-edit"></i>&nbsp;编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="dhicon dh-remove"></i>&nbsp;删除</a>
	{{#  }else if(pageType == 'deleted'){ }}
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="readonly"><i class="dhicon dh-search"></i>&nbsp;查看</a>
	<a class="layui-btn layui-btn-xs" lay-event="transport"><i class="dhicon dh-external-link"></i>&nbsp;转发</a>
	<a class="layui-btn layui-btn-xs" lay-event="recover"><i class="dhicon dh-refresh"></i>&nbsp;恢复</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="dhicon dh-remove"></i>&nbsp;彻底删除</a>
	{{#  } }}
</script>-->
<script type="text/html" id="checkbox_important">
    <input type="checkbox" value="{{d.guid}}" alt="{{d.mailType}}" lay-skin="switch" lay-text="是|否" name="important"
           lay-filter="change" {{ d.important ? 'checked' : '' }}>
</script>
<script type="text/html" id="checkbox_perpetual">
    <input type="checkbox" value="{{d.guid}}" alt="{{d.mailType}}" lay-skin="switch" lay-text="是|否" name="perpetual"
           lay-filter="change" {{ d.perpetual ? 'checked' : '' }}>
</script>
<script type="text/html" id="buttontext_mailLabel">
    <input style="width: 94%;border: 0;padding: 0 5px;height: 25px;background: none;" type="text"
           value="{{d.mailLabel}}" name="mailLabel" readonly><i class="layui-icon layui-icon-more getMore"
                                                                data-for="mailLabel" data-guid="{{d.guid}}"
                                                                data-mailType="{{d.mailType}}"></i>
</script>
<script type="text/html" id="radio_urgentDegree">
    {{#  if(d.urgentDegree == '普通'){ }}
    <font color="#0095e7">{{d.urgentDegree}}</font>
    {{#  }else if(d.urgentDegree == '加急'){ }}
    <font color="#ffb800">{{d.urgentDegree}}</font>
    {{#  }else if(d.urgentDegree == '特急'){ }}
    <font color="red">{{d.urgentDegree}}</font>
    {{#  } }}
</script>
<script type="text/html" id="dropdown_fromUserName">
    {{d.fromUserName}} [{{d.fromUser}}]
</script>
<script type="text/html" id="checkbox_readed">
    {{#  if(d.readed == true && d.urgentDegree == '普通'){ }}
    <i class="dhicon dh-mailread" style="color: #0095e7" title="普通邮件"></i>
    {{#  }else if(d.readed == true && d.urgentDegree == '加急'){ }}
    <i class="dhicon dh-mailread" style="color: #ffb800" title="加急邮件"></i>
    {{#  }else if(d.readed == true && d.urgentDegree == '特急'){ }}
    <i class="dhicon dh-mailread" style="color: red" title="特急邮件"></i>
    {{#  }else if(d.readed == false && d.urgentDegree == '普通'){ }}
    <i class="dhicon dh-envelope" style="color: #0095e7" title="普通邮件"></i>
    {{#  }else if(d.readed == false && d.urgentDegree == '加急'){ }}
    <i class="dhicon dh-envelope" style="color: #ffb800" title="加急邮件"></i>
    {{#  }else if(d.readed == false && d.urgentDegree == '特急'){ }}
    <i class="dhicon dh-envelope" style="color: red" title="特急邮件"></i>
    {{#  } }}
</script>
<script>
    $("#expander").css({
        'background': JSON.parse(window.localStorage.getItem('layuiAdmin')).theme.color.selected,
        "margin-top": "30px"
    });
    // $("#expander").css('background',parent.logo_color_rgba);
    var prefix = ctx + prefix, $, layer, form, table, tableIns;
    layui.use(['table', 'layer', 'jquery', 'form'], function () {
        $ = layui.$, layer = layui.layer, form = layui.form, table = layui.table;
        tableIns = table.render({
            elem: '#dhtable'
            , url: prefix + "/list?pageType=" + pageType
            , cols: [gridColumns.gridBody
            ]
            , toolbar: '#toolbar'
            , height: 'full-' + 0
            // ,width: 985
            , page: true
            , loading: true
            , autoSort: false
            , even: true //开启隔行背景
            , limit: 50
            , limits: [10, 50, 100, 150, 300, 500]
            , defaultToolbar: []
            , done: function (res, curr, count) {
                $(".getMore").click(function () {
                    var selectedObject = $(this).prev().val(),
                        data_guid = $(this).attr("data-guid"),
                        data_mailType = $(this).attr("data-mailType");
                    var title = '选择邮件标签',
                        url = "/system/mail/mailLabelSelectList?pagetype=checkbox&selectedObject=" + selectedObject,
                        areaObj = ['600px', '490px'];
                    layer.open({
                        type: 2//Page层类型
                        , area: areaObj
                        , offset: '10%'
                        , title: title
                        , shade: 0.6 //遮罩透明度
                        , maxmin: true //允许全屏最小化
                        , content: url
                        , btn: ['确定', '关闭'] //只是为了演示
                        , yes: function (index) {
                            var res = window["layui-layer-iframe" + index].callbackdata();
                            var reg = new RegExp(",", "g"), mailLabel_obj = [], data = {};
                            $.each(res, function (i, v) {
                                mailLabel_obj.push(v['vname'] + ';');
                            })
                            $("#mailLabel").val(mailLabel_obj.toString().replace(reg, ''));
                            data['guid'] = data_guid;
                            data['mailType'] = data_mailType;
                            data['mailLabel'] = mailLabel_obj.toString().replace(reg, '');
                            $.operate.post(prefix + "/maillabelpost", {'infoItems': JSON.stringify([data])}, function (result) {
                                allReload(result)
                            });
                        }
                        , btn2: function () {
                            layer.closeAll();
                        }
                    });
                })
            }
        });
        //监听行单击事件
        table.on('row(ftable)', function (obj) {
            //已读操作
            if ($(obj.tr).find('.dh-envelope')) {
                $(obj.tr).find('.dh-envelope').removeClass('dhicon dh-envelope').addClass('dhicon dh-mailread');
                $.post("/system/mail/readedpost", {'infoItems': JSON.stringify([{guid: obj.data.guid, readed: 1}])})
                //更新列表显示数量
                parent.refreshMail();
            }
            $("#nid").val(obj.data.fileMark);
            var vfileds = '<p><span class="getUpload" onclick="getUpload(\'vHFilesDefault\',\'Mail\',\'\',$(\'#fileFlag\'));"><i class="dhicon dh-paperclip"></i> &nbsp;<font id="fileFlag">' + obj.data.vHFilesDefault + '</font></span></p>';
            $("#m-content").html(vfileds + obj.data.mailContent);
            if ($("#view-content").css("display") == "none") {
                $("#view-content").css({'display': 'block', 'height': $(window).height() / 3});
                $("#m-content").css({'display': 'block', 'height': $(window).height() / 3 - 20});
                $(".layui-table-body").css({
                    height: "calc(100vh - 120px - " + $(window).height() / 3 + "px)"
                });
                var caoheight = $(window).height() / 3 + 20;
                $(".layui-table-fixed .layui-table-body").css({
                    height: "calc(100vh - 820px - " + caoheight + "px)"
                });
            }
        });
        //监听行双击事件
        table.on('rowDouble(ftable)', function (obj) {
            var data = obj.data;
            if (pageType == 'draftbox') {
                window.location.href = "/system/mail/edit?pageType=edit&guid=" + data.guid + "&fromPageType=" + pageType + "&mailType=" + data.mailType;
                $("body", parent.document).find(".link-book").css("display", "block");
                parent.treeReload();
                $("body", parent.document).find("#search-form").css("display", "none");
            } else {
                window.location.href = "/system/mail/edit?pageType=readonly&fromPageType=" + pageType + "&mailType=" + data.mailType + "&guid=" + data.guid;
            }
        });
        //监听表格排序问题
        table.on('sort(ftable)', function (obj) {
            table.reload('dhtable', { //dhtableTable是表格容器id
                initSort: obj,
                where: {
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
            closeView();
        });
        //监听工具条
        table.on('tool(ftable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'readonly') {
                window.location.href = "/system/mail/edit?pageType=readonly&fromPageType=" + pageType + "&mailType=" + data.mailType + "&guid=" + data.guid;
            } else if (obj.event === 'del') {
                $.modal.confirmCom("您确认要删除该邮件 [" + data.mailSubject + ']？', function () {
                    $.operate.post(prefix + "/deletedpost", {
                        'infoItems': JSON.stringify([{
                            guid: data.guid,
                            deleted: 1,
                            mailType: data.mailType
                        }])
                    }, function (result) {
                        //更新列表显示数量
                        parent.refreshMail();
                        allReload(result)
                    });
                });
            } else if (obj.event === 'delete') {
                $.modal.confirmCom("您确认要彻底删除该邮件 [" + data.mailSubject + ']？', function () {
                    $.operate.post(prefix + "/deletedsuppost", {
                        'infoItems': JSON.stringify([{
                            guid: data.guid,
                            deletedSup: 1,
                            mailType: data.mailType
                        }])
                    }, function (result) {
                        allReload(result)
                    });
                });
            } else if (obj.event === 'recover') {
                $.modal.confirmCom("您确认要恢复该邮件 [" + data.mailSubject + ']？', function () {
                    $.operate.post(prefix + "/deletedpost", {
                        'infoItems': JSON.stringify([{
                            guid: data.guid,
                            deleted: 0,
                            mailType: data.mailType
                        }])
                    }, function (result) {
                        //更新列表显示数量
                        parent.refreshMail();
                        allReload(result)
                    });
                });
            } else if (obj.event === 'reply' || obj.event === 'transport' || obj.event === 'edit') {
                window.location.href = "/system/mail/edit?pageType=" + obj.event + "&guid=" + data.guid + "&fromPageType=" + pageType + "&mailType=" + data.mailType;
                // } else if(obj.event === 'edit'){
                // 	window.location.href = "/system/mail/edit?pageType=edit&guid="+data.guid;
            } else if (obj.event === 'cancel') {
                $.modal.confirmCom("您确认要撤销该邮件 [" + data.mailSubject + ']？', function () {
                    $.operate.post(prefix + "/mailtypepost", {
                        'infoItems': JSON.stringify([{
                            guid: data.guid,
                            mailType: '撤销'
                        }])
                    }, function (result) {
                        allReload(result)
                    });
                });
            }
        });
        //监听开关动作
        form.on('switch(change)', function (obj) {
            var data = {}, url = '';
            data['guid'] = obj.value;
            data['mailType'] = obj.elem.alt;
            if (obj.elem.name == 'important') {
                url = prefix + "/importantpost"
            } else if (obj.elem.name == 'perpetual') {
                url = prefix + "/perpetualpost"
            }
            if (obj.elem.checked == true) {
                data[obj.elem.name] = 1;
            } else {
                data[obj.elem.name] = 0;
            }
            $.operate.post(url, {'infoItems': JSON.stringify([data])}, function (result) {
                allReload(result)
            });
        });

        //监听表头操作区
        table.on('toolbar(ftable)', function (obj) {
            var checkStatus = table.checkStatus('dhtable');
            switch (obj.event) {
                case 'add'://添加
                    window.location.href = prefix + '/edit?pageType=add&fromPageType=outbox';
                    break;
                case 'refresh'://刷新邮件
                    table.reload('dhtable');
                    break;
            }
        });

        //刷新
        function allReload(result) {
            if (result.code == 0) {
                setTimeout(function () {
                    layer.closeAll();
                    table.reload('dhtable');
                    closeView()
                }, 1000);
            }
        }
    });

    /*
    * 头部操作
    * type：remove 删除;deletedsup 彻底删除;readed 已读
    * */
    function toolbarFun(type) {
        if (table.checkStatus('dhtable').data.length > 0) {
            var infoItemsObj = '', title = '', url = '';
            switch (type) {
                case 'deleted':
                    infoItemsObj = getCheckObj('deleted', '1');
                    title = "您确认要删除 " + table.checkStatus('dhtable').data.length + " 封邮件？";
                    url = prefix + "/deletedpost";
                    break;
                case 'deletedsup':
                    infoItemsObj = getCheckObj('deletedSup', '1');
                    title = "您确认要彻底删除 " + table.checkStatus('dhtable').data.length + " 封邮件？";
                    url = prefix + "/deletedsuppost";
                    break;
                case 'readed':
                    infoItemsObj = getCheckObj('readed', '1');
                    title = "您确认要标识已读 " + table.checkStatus('dhtable').data.length + " 封邮件？";
                    url = prefix + "/readedpost";
                    break;
                case 'recover':
                    infoItemsObj = getCheckObj('deleted', '0');
                    title = "您确认要恢复 " + table.checkStatus('dhtable').data.length + " 封邮件？";
                    url = prefix + "/deletedpost";
                    break;
                case 'cancel':
                    infoItemsObj = getCheckObj('deleted', '0', '撤销');
                    title = "您确认要撤销 " + table.checkStatus('dhtable').data.length + " 封邮件？";
                    url = prefix + "/mailtypepost";
                    break;
            }
            $.operate.remove(title, url, {'infoItems': infoItemsObj}, function (result) {
                if (result.code == 0) {
                    setTimeout(function () {
                        layer.closeAll();
                        table.reload('dhtable');
                        closeView()
                    }, 1000);
                }
            });
        } else {
            layer.msg("无勾选数据！");
        }
        ;
    }



    //关闭预览
    function closeView() {
        $("#view-content").css("display", "none");
        $(".layui-table-body").css({
            height: $(window).height() - 172
        });
        $(".layui-table-fixed .layui-table-body").css({
            height: $(window).height() - 192
        });
    }

    /*
    * 封装选中数据
    * type 类型
    * typev	类型值1/0
    * */
    function getCheckObj(type = '', typev = '', mailType = '') {
        var arr = [];
        $.each(table.checkStatus('dhtable').data, function (i, v) {
            var obj = {};
            obj['guid'] = v.guid;
            obj['mailType'] = mailType ? mailType : v.mailType;
            if (type) obj[type] = typev;
            arr.push(obj);
        })
        return JSON.stringify(arr, null, 2);
    }

    function reloadTable(where) {
        tableIns.reload({page: {curr: 1}, where: where});
    }

    //邮件预览窗口  拖动操作
    var src_posi_Y = 0, dest_posi_Y = 0, move_Y = 0, is_mouse_down = false, destHeight = 30;
    $("#expander")
        .mousedown(function (e) {
            src_posi_Y = e.pageY;
            is_mouse_down = true;
        });
    $(document).bind("click mouseup", function (e) {
        if (is_mouse_down) {
            is_mouse_down = false;
        }
    })
        .mousemove(function (e) {
            dest_posi_Y = e.pageY;
            move_Y = src_posi_Y - dest_posi_Y;
            src_posi_Y = dest_posi_Y;
            destHeight = $("#view-content").height() + move_Y;
            if (is_mouse_down) {
                var v_height = destHeight > 30 ? destHeight : 30;
                $("#view-content").css("height", v_height);
                $("#m-content").css('height', v_height - 30);
                $(".layui-table-body").css({
                    height: "calc(100vh - 120px - " + v_height + "px)"
                });
                v_height += 20;
                $(".layui-table-fixed .layui-table-body").css({
                    height: "calc(100vh - 120px - " + v_height + "px)"
                });
            }
        });

</script>
</body>
</html>